<template>
  <el-container>
    <el-main>
      <div class="about-container">
        <h1>关于我们</h1>
        <div class="about-content">
          <section class="company-info">
            <h2>公司简介</h2>
            <p>
             尚马教育922第一小组  <strong></strong>
            </p>
          </section>

          <section class="team">
            <h2>团队成员</h2>
            <el-row :gutter="20">
              <el-col :span="6" v-for="member in teamMembers" :key="member.name">
                <el-card :body-style="{ padding: '20px' }">
                  <img :src="member.image" class="team-member-avatar" />
                  <div class="team-member-info">
                    <h3>{{ member.name }}</h3>
                    <p>{{ member.position }}</p>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </section>

          <section class="contact-info">
            <h2>联系我们</h2>
            <p>
              邮箱: contact@ourcompany.com
              <br />
              电话: +123 456 7890
              <br />
              地址: 1234 Elm Street, City, Country
            </p>
          </section>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { ElContainer, ElMain, ElRow, ElCol, ElCard } from 'element-plus';

export default {
  name: 'About',
  components: {
    ElContainer,
    ElMain,
    ElRow,
    ElCol,
    ElCard
  },
  data() {
    return {
      teamMembers: [
        {
          name: '魏鹏扬',
          position: '首席执行官',

        },
        {
          name: '亮神',
          position: '技术总监',
          image: new URL('@/assets/images/OIP.jpg', import.meta.url).href
        },
        {
          name: '刘神',
          position: '市场经理',

        },
        {
          name: '明明',
          position: 'CEO',

        }
      ]
    };
  }
};
</script>

<style scoped>
.about-container {
  padding: 20px;
}

.about-content {
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  font-size: 36px;
  margin-bottom: 20px;
}

section {
  margin-bottom: 40px;
}

.company-info,
.contact-info {
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
}

.team-member-avatar {
  width: 200px;
  height: 220px;
  text-align: center;
  border-radius: 50%;
  margin-bottom: 10px;
}

.team-member-info {
  text-align: center;
}
</style>
